<template>
	<view class="content">
		<view class="centre">
			<view class="entrance_item" @click="getAuthorize(1)">
				<image src="../../static/icon1.png" />
				<view>车贷计算</view>
			</view>
			<view class="entrance_item" @click="getAuthorize(2)">
				<image src="../../static/icon2.png" />
				<view>融租计算</view>
			</view>
			<view class="entrance_item" @click="getAuthorize(1)">
				<image src="../../static/icon3.png" />
				<view>利率计算</view>
			</view>
			<view class="entrance_item" @click="getAuthorize(2)">
				<image src="../../static/icon4.png" />
				<view>汽车分期</view>
			</view>
		</view>
		<!-- #ifdef MP-ALIPAY -->
		<view class="bottom_box" v-if="!phoneBol || !userBol">
			<button class="button_style" @click="getUserCode">支付宝授权登录</button>
		</view>
		<button v-if="!phoneBol" style="position: fixed;left: 0;top: 0;height: 100%;width: 100%;opacity: 0;"
			scope="phoneNumber" open-type="getAuthorize" @getAuthorize="getAuthorize" size="mini"
			@error="onAuthError"></button>
		<!-- #endif -->
		<Popup ref="refPopup" />
		<!-- <view style="height: 488rpx;">
			<image src="../../static/bg_img.png" class="bg_image"></image>
		</view>
		<view class="buttom_box">
			<view class="notice_box">
				<UniNotice color="#297EFF" style="border-radius: 30rpx;height: 60rpx;" background-color="#EBF3FF"
					:speed="30" show-icon scrollable :text="phoneArray || ''">
				</UniNotice>
			</view>
			<view class="content_box">
				<view class="title_content">
					<view>
						<image src="../../static/icon1.png" class="icon_style"></image>
					</view>
					<view>
						<view class="title">标准车贷计算器</view>
						<view class="describe">车贷首付月供在线计算，还款利息一目了然</view>
					</view>
				</view>
				<view style="display: flex;justify-content: flex-end;margin-top: 32rpx;">
					<view class="bottom_style" @click="getAuthorize(1)">立即计算</view>
				</view>
			</view>
			<view class="content_box">
				<view class="title_content">
					<view>
						<image src="../../static/icon2x.png" class="icon_style"></image>
					</view>
					<view>
						<view class="title">车辆融资租赁计算器</view>
						<view class="describe">车贷融资租赁在线计算 年率利一键算明白</view>
					</view>
				</view>
				<view style="display: flex;justify-content: flex-end;margin-top: 32rpx;">
					<view class="bottom_style" @click="getAuthorize(2)">立即计算</view>
				</view>
			</view>
		</view> -->

	</view>
</template>

<script>
	import Popup from '../../components/Popup/index.vue'
	import { 
		requsetGet
	} from '../../utils/request';
	// import UniNotice from '../../uni_modules/uni-notice-bar/components/uni-notice-bar/uni-notice-bar.vue'
	export default {
		components: {
			// UniNotice,
			Popup
		},
		data() {
			return {
				phoneBol: false,
				userBol: false,
				phoneArray: '',
				type: null,
			}
		},
		onShow() {
			// #ifdef MP-ALIPAY
			console.log("进入触发==222")
			this.getStorageValue('phone').then((phone) => {
				phone && (this.phoneBol = true);
			});
			this.getStorageValue('user').then((user) => {
				user && (this.userBol = true);
			});
			// #endif
			// #ifdef MP-TOUTIAO
			this.phoneBol = true;
			this.userBol = true
			// #endif
		},
		methods: {
			showModel(key, message) {
				uni.showModal({
					title: '提示',
					content: message || '取消授权，可能会影响部分服务无法使用，或页面不完整性',
					cancelText: '我知道了',
					confirmText: '重新授权',
					success: (res) => {
						if (res.confirm) {}
					}
				})
			},
			getAuthorize(type) {
				if (this.phoneBol && this.userBol) {
					this.onNavigateTo(`/pages/calculator/index?type=${type}`)
				} else {
					my.getPhoneNumber({
						success: async (res) => {
							console.log("测试123",res)
							requsetGet('AlipayController/decryptPhone', {
								phoneEncryptedStr: res.response,
								appType: await this.appTypeResult()
							}).then(async ({
								data
							}) => {
								uni.setStorage({
									key: 'phone',
									data: {
										phone: data.mobile
									}
								});
								this.phoneBol = true;

								if (!this.userBol) await this.getUserCode();
								if (this.userBol && this.phoneBol) {
									Number.isInteger(type) && this.onNavigateTo(
										`/pages/calculator/index?type=${type}`);
								}
								// uni.hideLoading();
							})
						}
					})
				}
			},
			getUserCode() {
				return new Promise((resolve, reject) => {
					my.getAuthCode({
						scopes: ['auth_user'],
						success: async (res) => {
							const {
								data
							} = await requsetGet('AlipayController/getAlipayuserByCode', {
								code: res.authCode,
								appType: await this.appTypeResult(),
							});
							console.log(data, 'data------------>')
							const user = {
								nickName: data.nickName,
								avatar: data.avatar,
								userId: data.userId
							};
							uni.setStorage({
								key: 'user',
								data: {
									user
								}
							});
							this.userBol = true;
							const datas = {
								phone: await this.getStorageValue('phone'),
								...user,
								appType: await this.appTypeResult()
							};
							await requsetGet('/AlipayController/registerUser', datas);
							resolve(true)
						},
						fail: (err) => {
							console.log(err)
							reject(false);
							uni.hideLoading();
							this.showModel();
						}
					})
				})
			},
			onAuthError(err) {
				// uni.hideLoading();
				this.showModel()
			},
			onNavigateTo(url) {
				uni.navigateTo({
					url
				})
			},
			getStorageValue(key, getValueKey) {
				return new Promise((resolve, reject) => {
					uni.getStorage({
						key,
						success({
							data
						}) {
							if (!data) return reject(new Error(`本地内存未找到该${key}数据`));
							if (getValueKey) resolve(data[getValueKey])
							else resolve(data[key])
						},
						fail(err) {
							reject(err)
						}
					})
				})
			},
		},

	}
</script>
<style>
	page {
		background-color: #EBF3FF;
	}
</style>
<style lang="scss">
	.icon_style {
		width: 92rpx;
		height: 92rpx;
		margin-right: 24rpx;
	}

	.content {
		/* #ifdef MP-TOUTIAO */
		background-image: url('https://cdcrm.oss-cn-hangzhou.aliyuncs.com/cdcrm/business/2024/3/52191709716720136.png');
		/* #endif */
		/* #ifdef MP-ALIPAY */
		background-image: url('../../static/bg_img.png');
		/* #endif */
		background-repeat: no-repeat;
		background-size: 100% 800rpx;

		.centre {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 0 32rpx;
			padding-top: 510rpx;

			.entrance_item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 320rpx;
				height: 200rpx;
				background: linear-gradient(180deg, #F5F9FF 0%, #FFFFFF 100%);
				border-radius: 24rpx;
				border: 2rpx solid #FFFFFF;
				font-size: 28rpx;
				margin-bottom: 48rpx;

				image {
					width: 92rpx;
					height: 92rpx;
					margin-bottom: 16rpx;
				}
			}
		}

		.bottom_box {
			display: flex;
			justify-content: center;

			.button_style {
				width: 95%;
				height: 96rpx;
				font-size: 32rpx;
				font-weight: 500;
				background: #297EFF;
				border-radius: 48rpx;
				color: #fff;
			}
		}


	}
</style>